<template>
	<view class="content">
		<view class="alipay">
			<view class="alipay_title">可提现余额</view>
			<view class="alipay_money">￥ {{info.money}}</view>
			<view class="alipay_select">
				<view :class="item.id == active ?'act':'alipay_box'" v-for="(item,index) in list" :key="index" @click="sel(item.id,item.value)">{{item.value}}</view>
			</view>
			<view class="alipay_form"> 
				<view class="alipay_item">
					<view class="alipay_l">银行卡号：</view>
					<input type="number" value=""  v-model="zfb"/>
				</view>
				<view class="alipay_item">
					<view class="alipay_l">开户行名称：</view>
					<input type="text" value="" v-model="zfbname"/>
				</view>
				<view class="alipay_item">
					<view class="alipay_l">开户人姓名：</view>
					<input type="text" value="" v-model="cardname"/>
				</view>
				<view class="alipay_item">
					<view class="alipay_l">请输入金额：</view>
					<input type="number" value="" v-model="zfbmoney" @input="onInput"/>
				</view>
			</view>
			<view class="tixian" @click="ali()">提现</view>
		</view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';		
	export default {
		data() {
			return {
				active:1,
				info:'',
				zfb:'',//银行卡号
				zfbname:'',//银行卡持卡人
				cardname:'',//开户行名称
				zfbmoney:'',//提现金额
				list:[{id:1,value:50},{id:2,value:100},{id:3,value:150},{id:4,value:200}]
			}
		},
		onLoad(){
			this.userinfo()
			this.zfbmoney =50//首次进入先给一个默认值
		},
		methods: {
			onInput(e){
				//根据input的值来改变选中的值
				if(e.detail.value == 50){
					this.active = 1
				}else if(e.detail.value == 100){
					this.active = 2
				}else if(e.detail.value == 150){
					this.active = 3
				}else if(e.detail.value == 200){
					this.active = 4
				}else{
					this.active = 0
				}
			},
			sel(id,value){
				console.log(id,value)
				this.active = id
				this.zfbmoney = value//将选中的值来改变input的值
			},
			ali(){
				//提现操作
				var _this = this
				var token = uni.getStorageSync('token')
				var data = {
					type:2,
					card:_this.zfb,
					tx_username:_this.zfbname,
					bank_name:_this.cardname,
					tx_amount:_this.zfbmoney,
				}
				uni.showLoading({
				    title: '提现中'
				});
				uni.request({
					url: getdata.websiteUrl + '/user/withdraw',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					data:data,
					success: res => {
						console.log(res)
						uni.hideLoading();
						if(res.data.code == 1){
							getdata.shou(res.data.msg)
							this.userinfo()	
							_this.zfb =  ''
							_this.zfbname =  ''
							_this.cardname =  ''
							_this.zfbmoney =  50
							setTimeout(function(){
								uni.navigateBack(); 
							},1500)
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			userinfo(){
				//获取用户信息
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						uni.hideLoading();
						if(res.data.code == 1){
							_this.info = res.data.data
							console.log(_this.info,'_this.info')
						}else if(res.data.code == 401){
							getdata.shou('请登录')
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						console.log(res,'11111')
						getdata.shou('服务器断开链接')
					}
				});
			},
		}
	}
</script>

<style lang="scss">
.content{
	width: 100vw;
	height: 100vh;
	background: #F5F5F5;
	box-sizing: border-box;
	padding: 25rpx 0;
	.alipay{
		width: 690rpx;
		height: 100%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 35rpx;
		.alipay_title{
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #1578F2;
			text-align: center;
			padding-top: 64rpx;
		}
		.alipay_money{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #1578F2;
			margin-top: 40rpx;
			text-align: center;
		}
		.alipay_select{
			display: flex;
			justify-content: space-between;
			margin-top: 55rpx;
			.alipay_box{
				width: 120rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #FFFFFF;
				border: 2rpx solid #D9D8D5;
				font-size: 30rpx;
				font-family: PingFang SC;
				color: #010101;
				text-align: center;
			}
		}
		.alipay_form{
			margin-top: 110rpx;
			.alipay_item{
				border-bottom: 2rpx solid #E3DFDF;
				display: flex;
				align-items: center;
				height: 80rpx;
				padding: 20rpx 0;
				.alipay_l{
					font-size: 26rpx;
					font-family: PingFang SC;
					color: #302E37;
					margin-left: 20rpx;
				}
				input{
					flex: 1;
					height: 100%;
					font-size: 26rpx;
				}
			}
		}
		.tixian{
			width: 300rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #1578F2;
			border-radius: 50rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #F5F5F5;
			margin: 150rpx auto;
			// position: absolute;
			// bottom:200rpx;
			// left:225rpx;
			text-align: center;
		}
	}
}
.act{
	color: #FFFFFF;
	background: #1578F2;
	width: 120rpx;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	text-align: center;
}
</style>
